<template>
	<div class="videoss">
		<!-- 默认视频 -->
		<section class="default" v-if="!datas.src">
			<van-icon name="tv-o" size="150px" />
		</section>

		<!-- 选择视频后 -->
		<section v-else style="position: relative">
			<video :src="STATIC_URL + datas.src" controls :autoplay="datas.autoplay == 1 ? true : false" :poster="STATIC_URL + datas.coverUrl"></video>
		</section>

		<!-- 删除组件 -->
		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="videoss">
import { STATIC_URL } from '/@/utils/config';
const props = defineProps({
	datas: {},
});
</script>

<style scoped lang="scss">
.videoss {
	position: relative;

	/* 默认视频 */
	.default {
		width: 100%;
		height: 210px;
		background: #979797;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 播放图标 */
	.bof {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 100px;
		opacity: 0.5;
		color: #999;
	}
	video {
		width: 100%;
	}
}
</style>
